[React] 리스트 타입 데이터 map() 메소드로 jsx에서 렌더링, 출력하기

React에서 리스트(배열) 타입의 데이터를 사용하여 여러개의 컴포넌트나 태그로 jsx 파일에서 출력, 렌더링하는 방법을 알아봅니다.

# React 리스트 타입 데이터 여러 개로 출력하는 방법, map

리액트 앱에서는 다른 프레임워크에서 사용하는 반복 프로퍼티, 디렉티브 등이 존재하지 않습니다. 예를들어 v-for 또는 @ngFor 를 사용할 수 없죠.

그렇다면 어떻게 하면 리스트 타입의 컬렉션 데이터를 여러 개의 컴포넌트 또는 태그로 변환해 웹페이지에 출력할 수 있을까요? 아래에서 자세히 알아봅니다.

! react 리스트 데이터에 map() 메소드 사용하기

자바스크립트의 map()은 배열에 사용하며 반복하여 내부 값을 모두 순환합니다. 즉 배열 타입의 데이터에 map()을 사용해 출력할 수 있죠. 대부분의 react 에서는 반복되는 렌더링을 구현하기 위해서 map()을 많이 씁니다.

Array.map(function)

이때 주의할 점은 react에서는 key 프로퍼티를 반드시 추가해 주어야 합니다. 그렇게 하지 않으면 콘솔창에 에러 메시지가 출력됩니다. 유일한 값을 key에 추가하도록 합니다.

그럼 한 가지 예제를 만들어 자세히 알아보겠습니다. 만약 아래와 같이 state에 데이터가 존재하는 경우...
위 변수 mySite를 사용하여 아래와 같이 구현할 수 있습니다.

위 코드를 살펴보면 state의 배열값 sites에 map()을 사용하여 내부의 item을 return하여 모두 출력한 예제입니다. 이때 key 프로퍼티를 사용하였고 값으로 name을 주었습니다.

! react map() 사용시 unique key 값 경고, 에러

참고로 key 값은 unique한 값을 사용해야 하며 아닌 경우 react 경고가 발생할 수 있습니다. 이 경우 unique key값이 없는 경우라면 아래처럼 map()의 index를 사용한 것 역시 방법입니다.

위와 같이 key 값을 설정하면 react app의 경고가 발생하지 않게 됩니다.


이처럼 react에서 map()을 사용해 리스트 타입을 반복 출력하는 방법을 알아보았습니다.